<template>
    <view class="content">
        
        <view class="search">
            <input type="text" v-model="keyWords" placeholder="输入收货方名称" class="s-inp">
            <view class="s-btn" @click="orders_search">搜索</view>
        </view>
		
		<view class="box" v-for="(item, index) in list" :key="index">
		    <view class="item">
		        <view class="grey">发货方</view>
		        <view class="item-right">{{item.shipper}}</view>
		    </view>
		    <view class="item">
		        <view class="grey">联系人</view>
		        <view class="item-right">{{item.shipper_contact}}</view>
		    </view>
		    <view class="item">
		        <view class="grey">联系方式</view>
		        <view class="item-right">{{item.shipper_phone}}</view>
		    </view>
		    <view class="item">
		        <view class="grey">收货地址</view>
		        <view class="item-right">{{item.address}}</view>
		    </view>
		    <view class="item">
		        <view class="grey">经营位置</view>
		        <view class="item-right">{{item.line}}</view>
		    </view>
		    <view class="item">
		        <view class="grey">联系人</view>
		        <view class="item-right">{{item.recipient_contact}}</view>
		    </view>
		    <view class="item">
		        <view class="grey">联系方式</view>
		        <view class="item-right">{{item.recipient_phone}}</view>
		    </view>
		    <view class="item">
		        <view class="grey">备注</view>
		        <view class="item-right">{{item.remark}}</view>
		    </view>
		    
		    <view class="btns2">
		        <view class="btn1" @click="choose(item)">选择</view>
		    </view>
		</view>
        
        <view v-if="list.length==0">
            <u-loadmore status="nomore" />
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list:[],
              
                keyWords:'',
                id:'',
                order_type:''
            };
        },
        onLoad(option) {
            this.id = option.id
            if(option.order_type){
                this.order_type = option.order_type
            }
            this.orders_search()
        },
        methods: {
            choose(item) {
                
                uni.$emit('orderAddress',item)
				this.$backT()
			},
            //获取车辆列表
            orders_search(){
                // if(!this.keyWords){
                //     this.$toast('请输入收货方姓名');
                //     return
                // }
                this.$ajax('orders_search', {
                    user_token:this.$getTokens(),
                    car_id:this.id,
                    name:this.keyWords,
                    order_type:this.order_type
                    
                }).then(ret => {
                	if (ret.success == 1000) {
                        if(ret.detail){
                            this.list = ret.detail.orders;
                            
                            
                        }else{
                            this.$toast(ret.detail.msg);
                        }
                        
                	} else {
                		this.$toast(ret.detail.msg);
                	}
                    
                });
            },
            
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f2f4fa;
    }
    .content {
    	padding: 30rpx 20rpx;
    }
	.search{
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding-bottom: 20rpx;
	}
	.s-inp{
	    flex: 1;
	    height: 73rpx;
	    background-color: #fff;
	    border-radius: 15rpx;
	    line-height: 73rpx;
	    padding-left: 20rpx;
		margin-right: 17rpx;
	}
	.s-btn{
	    width: 134rpx;
	    height: 73rpx;
	    background-color: #0075cf;
	    border-radius: 15rpx;
	    color: #fff;
	    text-align: center;
	    line-height: 73rpx;
	}
	
	.box{
	    padding: 20rpx 30rpx;
	    background-color: #fff;
	    border-radius: 20rpx;
	    margin-bottom: 16rpx;
	}
	.title2{
	    font-size: 34rpx;
	    font-weight: bold;
	    color: #00457f;
	    padding: 10rpx 0 20rpx;
	}
	.title{
	    font-size: 34rpx;
	    font-weight: bold;
	    padding: 20rpx 0;
	}
	.item{
	    padding: 20rpx 0;
	    display: flex;
	    justify-content: space-between;
	    align-items: flex-start;
	}
	.item-center{
	    align-items: center;
	}
	.grey{
	    color: #656565;
	}
	.item-right{
	    flex: 1;
	    text-align: right;
	    font-weight: bold;
	    word-break: break-all;
	    white-space: pre-line;
	    padding-left: 30rpx;
	    display: flex;
	    justify-content: flex-end;
	    align-items: center;
	}
	.inp{
	    flex: 1;
	    text-align: right;
	}
	.time{
	    background-color: #f5f6fa;
	    border-radius: 8rpx;
	    width: 230rpx;
	    height: 70rpx;
	    margin-left: 10rpx;
	    text-align: center;
	}
	.t-inp{
	    background-color: #f5f6fa;
	    width: 100%;
	    min-height: 180rpx;
	    height: auto;
	    padding: 20rpx;
	    border-radius: 10rpx;
	}
	.up-icon{
	    width: 187rpx;
	    height: 187rpx;
	    margin-top: 20rpx;
	}
	.price{
	    color: #ff3f00;
	    padding-left: 15rpx;
	}
	.price-num{
	    font-size: 38rpx;
	    font-weight: bold;
	}
	
	.btns{
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding-top: 30rpx;
	    color: #fff;
	    font-size: 34rpx;
	}
	.btn-l{
	    padding: 25rpx 60rpx;
	    background-color: #00457f;
	    border-radius: 15rpx;
	}
	.btn-r{
	    padding: 25rpx 60rpx;
	    background-color: #ff5f2b;
	    border-radius: 15rpx;
	}
	
	.btns2{
	    display: flex;
	    justify-content: flex-end;
	    align-items: center;
	    color: #fff;
	}
	.btn1{
	    padding: 15rpx 50rpx;
	    background-color: #004580;
	    border-radius: 50rpx;
	    margin-left: 20rpx;
	}

</style>
